<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="logo">
      </div>
      <el-menu
        :default-active="activePath"
        mode="horizontal"
        background-color="#ffffff"
        text-color="#252b3a"
        :router="true"
        active-text-color="#c7000b">
        <el-menu-item index="/datacount" @click="a()">总览</el-menu-item>
        <el-menu-item index="/agent" @click="b()">代理管理</el-menu-item>
        <el-menu-item index="/video" @click="c()">影片管理</el-menu-item>
        <el-menu-item index="/withdraw" @click="d()">提现管理</el-menu-item>
        <el-menu-item index="/order" @click="e()">订单管理</el-menu-item>
        <el-menu-item index="/pay" @click="f()">支付通道</el-menu-item>
        <el-menu-item index="/wxff" @click="g()">防封管理</el-menu-item>
        <el-menu-item index="/domain" @click="h()">域名管理</el-menu-item>
        <el-menu-item index="/qtpz" @click="i()">前端配置</el-menu-item>
        <el-menu-item index="/config" @click="j()">平台设置</el-menu-item>
      </el-menu>
    </el-header>
    <!-- 页面主体区 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="170px">
        <router-view></router-view>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 被激活的链接地址
      activePath: ''
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 保存导航链接的激活状态
    a () {
      window.sessionStorage.setItem('activePath', '/datacount')
    },
    b () {
      window.sessionStorage.setItem('activePath', '/agent')
    },
    c () {
      window.sessionStorage.setItem('activePath', '/video')
    },
    d () {
      window.sessionStorage.setItem('activePath', '/withdraw')
    },
    e () {
      window.sessionStorage.setItem('activePath', '/order')
    },
    f () {
      window.sessionStorage.setItem('activePath', '/pay')
    },
    g () {
      window.sessionStorage.setItem('activePath', '/wxff')
    },
    h () {
      window.sessionStorage.setItem('activePath', '/domain')
    },
    i () {
      window.sessionStorage.setItem('activePath', '/qtpz')
    },
    j () {
      window.sessionStorage.setItem('activePath', '/config')
    }
  }
}
</script>

<style lang="less">
.home-container {
  height: 100%;
}

.el-header {
  background-color: #ffffff;
  display: flex;
  padding-left: 0;
    align-items: center;
}

.logo {
  width: 180px;
  height: 36px;
  padding-left: 30px;
}

.useravatar {
  width: 26px;
  height: 26px;
  padding-top: 0px;
  float: right;
  margin-top: 0px;
  margin-right:-1260px;
}

.el-aside {
  background-color: #ffffff;
}

.el-main {
  border-radius: 15px;    /*输入框圆角值*/
  background-color: #f7f7f7;
}

.el-menu-item:hover{
  color: #c7000b !important;
  background-color: #ffffff !important;
}

.el-menu-item{
  font-weight: bolder;
  background-color: #ffffff;
}

.el-menu-item.is-active {
  background-color: #ffffff !important;
}
</style>
